<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          <div class="tips">
            <i class="el-icon-info" />
            <span>本月: 社保在缴 公积金在缴</span>
          </div>
        </template>
        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="exportFile">excel导出</el-button>
          <el-button type="primary" size="small" @click="addclick">新增员工</el-button>
        </template>
      </PageTools>

      <el-card style="margin-top: 10px;">
        <el-table border :data="rowsList">
          <el-table-column label="序号" type="index" :index="indexMethod" width="160" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column label="聘用形式">
            <template #default="scope">
              {{ formatEmployment(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column prop="timeOfEntry" label="入职时间" width="180">
            <template v-slot="obj"> {{ obj.row.timeOfEntry | date_format }} </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="goDetail(scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="addDetail(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click.native="delList(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination :current-page="params.page" :page-sizes="[5, 6, 8, 10]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            />
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <add-employee-vue
      :dialogvisible="dialogvisible"
      @close-Dialog="closeDialog"
    />
    <!-- 分配角色弹框 -->
    <el-dialog
      class="assign-role"
      title="分配角色"
      :visible="showRoleDialog"
      @close="closeRoleDialog"
      @open="openRoleDialog"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <!-- 这里准备复选框 -->
      <template #footer>
        <el-button type="primary" size="small" @click="comfire">确定</el-button>
        <el-button size="small">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getEmployeeList, delEmployeeList, yuangongjuese } from '@/api/Employee'
import { getRoleList } from '@/api/Setting'
import AddEmployeeVue from '@/views/Employee/components/add-employee.vue'
import { getUserDetailById } from '@/api/user'
import { getExportData } from '@/utils/excel'
export default {
  // 过滤器
  filters: {
    date_format(val) {
    // 过滤器函数的第1个参数，永远表示原本要输出的值（本案例中，表示格式不太好的时间）
    // return 'aaaa' // 真正要输出的页面的值
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  components: {
    AddEmployeeVue
  },
  data() {
    return {
      params: {
        page: 1,
        size: 5
      },
      rowsList: [],
      total: 0,
      dialogvisible: false,
      showRoleDialog: false,
      checkList: [],
      roleList: [],
      curId: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getEmployeeList(this.params)
      console.log(res)
      this.rowsList = res.rows
      this.total = res.total
      console.log(this.rowsList)
      console.log(this.total)
    },
    handleSizeChange(val) {
      this.params.size = val
      this.params.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    indexMethod(index) {
      return (this.params.page - 1) * this.params.size + index + 1
    },
    async delList(id) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployeeList(id)
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {

      })
    },
    formatEmployment(value) {
      console.log(value)
      const map = {
        1: '正式',
        2: '非正式',
        4: '其他'
      }
      return map[value]
    },
    addclick() {
      this.dialogvisible = true
    },
    closeDialog() {
      this.dialogvisible = false
    },
    exportFile() {
      import('@/vendor/Export2Excel').then(async excel => {
        const res = await getEmployeeList(this.params)
        const headerRelation = {
          '姓名': 'username',
          '手机号': 'mobile',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '聘用形式': 'formOfEmployment',
          '部门': 'departmentName'
        }
        const { data } = getExportData(res.rows, headerRelation)
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // const data = []
        excel.export_json_to_excel({
          header: Object.values(headerRelation),
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    goDetail(id) {
      // query + path
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    addDetail(id) {
      this.showRoleDialog = true
      this.curId = id
    },
    closeRoleDialog() {
      this.showRoleDialog = false
    },
    async openRoleDialog() {
      const res = await getRoleList({
        page: 1,
        pagesize: 100
      })
      this.roleList = res.rows
      const del = await getUserDetailById(this.curId)
      console.log(del)
      this.checkList = del.roleIds
    },
    async comfire() {
      await yuangongjuese({
        id: this.curId,
        roleIds: this.checkList
      })
      this.$message.success('分配成功')
      this.showRoleDialog = false
    }
  }

}
</script>

<style>
</style>
